<template>
    <div>
      <!-- Your X6 Graph container -->
      <div ref="x6Container"></div>
  
      <!-- Save and Load buttons -->
<<<<<<< HEAD
      <button @click="saveToFile">Save</button>
      <button @click="loadFromFile">Load</button>
=======
      <!-- <button @click="saveToFile">Save</button> -->
      <el-button @click="saveToFile" type="primary">Save</el-button>
    <!-- <button @click="openDialog" :class="{ 'button1': true }">Select ELF file</button> -->
     <el-button @click="loadFromFile" type="primary">Load</el-button>
      <!-- <button @click="loadFromFile">Load</button> -->
>>>>>>> v3.0
    </div>
</template>
  
<script>
  import { Graph } from '@antv/x6';
  // import 'antv/x6/dist/x6.css';
  
  export default {
    data() {
      return {
        graph: null,
      };
    },
    mounted() {
      this.initializeGraph();
    },
    methods: {
      initializeGraph() {
        this.graph = new Graph({
          container: this.$refs.x6Container,
          grid: true,
        });
      },
      saveToFile() {
        // Get the graph data as JSON
        const graphData = this.graph.toJSON();
  
        // Save the JSON data to LocalStorage
        localStorage.setItem('graphData', JSON.stringify(graphData));
  
        console.log('Graph data saved to LocalStorage');
      },
      loadFromFile() {
        // Retrieve the graph data from LocalStorage
        const savedGraphData = localStorage.getItem('graphData');
  
        if (savedGraphData) {
          // Parse the JSON data and load it into the graph
          const parsedGraphData = JSON.parse(savedGraphData);
          this.graph.fromJSON(parsedGraphData);
  
          console.log('Graph data loaded from LocalStorage');
        } else {
          console.error('No saved graph data found');
        }
      },
    },
  };
</script>